<template>
  <div>
    <div class="flex items-center justify-between mb-5">
      <div class="title">个人报告表单</div>
      <el-button :disabled="checkedList.length === 0" type="primary" size="small" @click="handlePrintAll">
        批量打印
      </el-button>
    </div>
    <el-tree
      ref="treeRef"
      style="width: 100%"
      :data="dataSource"
      node-key="_UUID"
      default-expand-all
      show-checkbox
      :expand-on-click-node="false"
      @check-change="handleCheckChange"
    >
      <template #default="{ node }">
        <div class="custom-tree-node">
          <div class="label-name">{{ node.label }}</div>
          <div :class="isReviewItems(node) ? 'label-btn' : ''">
            <el-button v-if="isReviewItems(node)" link type="primary" @click="onView(node)">查看</el-button>
            <el-button v-if="isReviewItems(node)" link type="primary" @click="handlePrint(node)">打印</el-button>
          </div>
        </div>
      </template>
    </el-tree>
    <JudgeInfoDialog
      v-if="hookVisible"
      v-model="hookVisible"
      :info="dialogInfo"
      :type="type"
      @at-close="onCloseDialog"
    />
  </div>
</template>

<script setup lang="ts">
import { v4 as uuidv4 } from 'uuid'
import JudgeInfoDialog from './components/JudgeInfoDialog.vue'
import { exportJudgePointScore, exportJudgePointScoreBatch, getJudgeReportForm } from '@/api/scoring-details-summary'
const projectId = useProjectInfoStore().projectInfo.id
onMounted(() => {
  initData()
})
const isReviewItems = (node: any) => {
  return node?.data?.type === '评审项'
}
const dataSource = ref<any[]>([])
const initData = async () => {
  const res: any = await getJudgeReportForm({ projectId })
  dataSource.value = handleTreeData(res)
}
// 处理树形数据 让子集和父集的id一致，加上_UUID
const handleTreeData = (data: any) => {
  const result: any[] = []
  // 递归处理数据
  const processData = (items: any[], type: string, parentId?: string): any[] => {
    return items.map((item: any) => {
      const node: any = {
        type,
        id: item.id || item.itemId,
        label: item.name || item.itemName, // 保持与 el-tree 的兼容性
        parentId, // 添加父级id
        _UUID: uuidv4()
      }
      // 如果有 itemList，递归处理
      if (item.itemList && item.itemList.length > 0) {
        node.children = processData(item.itemList, '评审项', node.id)
      }
      return node
    })
  }

  // 处理顶层数据
  if (Array.isArray(data)) {
    result.push({ label: '全选', _UUID: uuidv4(), children: processData(data, '评委') })
  }

  return result
}
const { type, hookVisible, dialogInfo, onOpenDialog, onCloseDialog } = useDialog(null)
const onView = (node: any) => {
  const info = {
    judgeId: node.data.parentId,
    itemIds: [node.data.id]
  }
  type.value = node.data.label
  onOpenDialog(info)
}
const handlePrint = async (node: any) => {
  const judgeId = node.parent.data.id
  const itemId = node.data.id
  const projectId = useProjectInfoStore().projectInfo.id
  if (judgeId && itemId) {
    const { fileName, fileStream }: any = await exportJudgePointScore({ projectId, judgeId, itemId })
    previewPDFInNewWindow(fileStream, fileName)
  }
}
const treeRef = ref<any>()
const checkedList = ref<any[]>([])
const handlePrintAll = async () => {
  const { fileName, fileStream }: any = await exportJudgePointScoreBatch(checkedList.value)
  previewPDFInNewWindow(fileStream, fileName)
}
const handleCheckChange = () => {
  const nodes = treeRef.value.getCheckedNodes()
  const projectId = useProjectInfoStore().projectInfo.id
  checkedList.value = nodes
    .filter((item: any) => item.type === '评审项')
    .map((item: any) => {
      return {
        projectId,
        itemId: item.id,
        judgeId: item.parentId
      }
    })
}
</script>

<style lang="scss" scoped>
.title {
  font-weight: 600;
  font-size: 20px;
  color: #242222;
}
.custom-tree-node {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  .label-name {
    padding-left: 30px;
  }
  .label-btn {
    width: 200px;
    display: flex;
    justify-content: center;
  }
}
:deep(.el-tree-node__content) {
  height: 35px;
}
:deep(.el-icon) {
  font-size: 16px;
}
</style>
